var simpArr={};
$(document).ready(function() {
    systemFun.all_fun();
     setInterval(function(){
         systemFun.deviceInfo();
         systemFun.weathColler();
     },60000);
     setInterval(function(){
         systemFun.deviceByHour('data-swjk');
     },300000);
    setTimeout(function(){
        window.location.reload();
    },7200000);
    $(document).on("click",".big-layer",function(e){
        // $("#bigForm").html("");
         $("#bigForm").remove();
         $("#displayMain").after("<div id='bigForm' style='width: 100%;height: 100%;'></div>");
         var this_=$(this);
         var title_layer=$(this).find(".main-data-title").text();
         layer.open({
             type: 1,
            // title:[ title_layer,"font-size:18px;text-align:center;"],
             title:false,
             shadeClose: true,
             area: ['80%', '80%'],
             content: $("#bigForm"),
             success: function(index, layero) {
                 if(this_.hasClass("data-jk")){
                     $("#bigForm").html("<img src='"+simpArr.picOne.replace("|","")+"' style='width: 90%; height: auto;margin-top: 5%; margin-left: 5%;'/>");
                 }else if(this_.hasClass("data-sw")){
                     $("#bigForm").html("<img src='"+simpArr.picTwo.replace("|","")+"' style='width: 90%; height: auto;margin-top: 5%; margin-left: 5%;'/>");
                 }
                 else if(this_.hasClass("data-swjk")){
                     systemFun.deviceByHour('bigForm');
                 } else if(this_.hasClass("data-3d")){
                     systemFun.draw3DChart('bigForm');
                 }
                 //$("#bigForm").show();
             }
         });

     });
    $(document).on("click",".left-content-ul > li",function(e){
        var this_=$(this).text();
        layer.open({
            type: 1,
             title:[ this_,"font-size:18px;text-align:center;"],
            shadeClose: true,
            area: ['80%', '80%'],
            content: $("#leftbig"),
            success: function(index, layero) {
                $("#leftbig").show();
            }
        });

    });
});
var systemFun=(function(){
    var all_fun=function(){
        sysImg();
        weathColler();
        draw3DChart('data-3d');
        deviceInfo();
       deviceByHour('data-swjk');
    };

    var deviceInfo=function(){
        $.ajax({
            type: "post",
            url: $("#ctx").val()+'/screen/show/deviceInfo?id='+GetQueryString("id"),
            // url: 'http://127.0.0.1:8080/jeeplus/a/screen/show/weatherInfo?id=3',
            // url: '${ctx}/weatherInfo?id=3',
            async: false,
            dataType: "json",
            success: function (data) {
                console.log(data);
                if(data){
                    var strHtml="";
                    data.forEach(function(val,key){
                        strHtml+=`<div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">${val["deviceCode"]}</div>
                                <div class="data-sj-content-cycle-num"><em>${val["reportValue"]}</em>m</div>
                            </div>
                        </li>
                    </div>`;
                    });
                    if(data.length<4){
                        strHtml+=`<div class="swiper-slide">
                        <li>.
                            <div class="data-sj-content">
                                <div class="data-sj-content-head"></div>
                                <div class="data-sj-content-cycle-num"></div>
                            </div>
                        </li>   
                    </div>`;
                    }
                    $(".data-sj-ul").html(strHtml);
                    var mySwiper = new Swiper ('.swiper-container', {
                        slidesPerView:4,
                        autoplay:{
                            autoplay:true,//支持自动播放
                            disableOnInteraction :false,
                        },
                        direction: 'horizontal',
                        speed:1000,
                        loop: false,
                        delay:500
                    });
                }
            }
        });
    };
    var deviceByHour=function(containerId){
        $.ajax({
            type: "post",
            url: $("#ctx").val()+'/screen/show/deviceByHour?id='+GetQueryString("id"),
            // url: 'http://127.0.0.1:8080/jeeplus/a/screen/show/weatherInfo?id=3',
            // url: '${ctx}/weatherInfo?id=3',
            dataType: "json",
            success: function (data) {
                if(data){
                    var lendData=[];
                    for(var result in data){
                        lendData.push(result.split("|||")[1]);
                    }
                   drawWeekData(lendData,data,containerId);
                }
            }
        });
    };
    var weathColler=function(){
        $.ajax({
            type: "post",
            url: $("#ctx").val()+'/screen/show/weatherInfo?id='+GetQueryString("id"),
           // url: 'http://127.0.0.1:8080/jeeplus/a/screen/show/weatherInfo?id=3',
           // url: '${ctx}/weatherInfo?id=3',
            async: false,
            dataType: "json",
            success: function (data) {
                if(data){
                    $(".right-content-ul .temperature").text(data.temperature+"℃");
                    $(".right-content-ul .humidity").text(data.humidity+"%");
                    $(".right-content-ul .wind").text(data.wind);
                    $(".right-content-ul .speed").text(data.speed);
                    $(".right-content-ul .noise").text(data.noise+"分贝");
                    $(".right-content-ul .pressure").text(data.pressure+"mba");
                    $(".right-content-ul .pm25").text(data.pm25+"ug/m³");
                    $(".right-content-ul .pm10").text(data.pm10+"ug/m³");
                }
            }
        });
    };
    var sysImg=function(){
        $.ajax({
            type: "post",
           url: $("#ctx").val()+'/screen/show/localInfo?id='+$("#localeId").val(),
           // url: 'http://127.0.0.1:8080/jeeplus/a/screen/show/localInfo?id=3',
            async: false,
            dataType: "json",
            success: function (data) {
                if(data){
                    simpArr=data;
                    $("#data-jk img").attr("src",data.picOne.replace("|",""));
                    $("#data-sw img").attr("src",data.picTwo.replace("|",""));

                }
            }
        });
    };
    var drawWeekData=function(lendData,data,containerId){
        var myChart = echarts.init(document.getElementById(containerId), 'macarons');
        option = {
            title:{
                show:containerId=="bigForm" ? true : false,
                text:containerId=="bigForm" ? "水位波形图" : "",
                left: 'center',
                textStyle:{
                    fontSize:24,

                },
                padding:10,
                top:'1%'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                left: 'right',
                data:lendData,
                show:containerId=="bigForm" ? true : false,
                top:'6%',
                right:'2%',
                textStyle:{
                    fontSize:18
                }

            },
            grid:function(){
                var obj={};
                if(containerId=="bigForm"){
                    obj={
                        top:'15%',
                        left: '3%',
                        right: '3%',
                        bottom: '2%',
                        containLabel: true
                    };
                }else{
                   obj= {
                       top: '2%',
                       left: '1%',
                       right: '2%',
                       bottom: '2%',
                       containLabel: true
                   }
                }
                return obj;
            }(),
            xAxis: {
                axisTick: {
                    show: false,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:function(){
                            if(containerId=="bigForm"){
                                return '#000';
                            }else{
                                return '#fff';
                            }
                        }(),
                        width:2
                    }
                },
                axisLabel:{
                    color:function(){
                        if(containerId=="bigForm"){
                            return '#000';
                        }else{
                            return '#fff';
                        }
                    }()
                },
                splitLine:{
                    show:false
                },
                type: 'category',
                boundaryGap: true,
                data: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16', '17', '18', '19', '20', '21','22','23'],
            },
            yAxis: {
                axisTick: {
                    show: true,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:function(){
                            if(containerId=="bigForm"){
                                return '#000';
                            }else{
                                return '#fff';
                            }
                        }(),
                        width:2
                    }
                },
                axisLabel:{
                    color:function(){
                        if(containerId=="bigForm"){
                            return '#000';
                        }else{
                            return '#fff';
                        }
                    }()
                },
                splitLine:{
                    show:false
                },
                boundaryGap: true,
                type: 'value'
            },
         /*  series: [{
                name:'数据1',
                data: [0, 0, 0, 0, 0, 0, 0],
                type: 'line',
                smooth: true
            },
                {
                    name:'数据2',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    type: 'line',
                    smooth: true
                }]*/
           series:function(){
            var series=[];
            for(var result in data){
                var item={
                    name:result.split("|||")[1],
                    type:'line',
                    smooth:true,
                    data:function(){
                       return data[result];
                    }(),
                    markPoint: {
                        data:function(){
                            var obj=[
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ];
                            if(containerId=="bigForm"){
                                return obj;
                            }else{
                                return "";
                            }
                        }()
                    },
                }
                series.push(item);
            }
               return series;
           }()
        };

        myChart.setOption(option,true);
        //echarts图表随着屏幕的大小自适应
        window.onresize = myChart.resize;
    };
    var draw3DChart=function (containerId){

        var myChart = echarts.init(document.getElementById(containerId), 'macarons');
        a = [5,26,43,69]
        b = [6,48,82,36]
        c = [3,8,10,4]
        p = 2
        r1 = 15
        r2 = 20
        r3 = 25
        r4 = 30
        var datas = [[26,48,8],[43,82,10],[69,36,4],[38,87,9]]
        option = {
            title:{
                text:containerId=="bigForm" ? "水位3D图" : "",
                left: 'center',
                textStyle:{
                    fontSize:24,

                },
                padding:10
            },
            tooltip: {},
            grid: {
                top:'1%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            visualMap: {
                show: false,
                dimension: 2,
                min: -1,
                max: 1,
                inRange: {
                    // color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    color: ['#3A40B0', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
                    // symbolSize: [1, 10]
                }
            },
            xAxis3D: {
                type: 'value',
                min:0,
                max:100,
                axisTick: {
                    show: true,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:function(){
                            if(containerId=="bigForm"){
                                return '#000';
                            }else{
                               return '#fff';
                            }
                        }(),
                        width:2
                    }
                },
                axisLabel:{
                    color:function(){
                        if(containerId=="bigForm"){
                            return '#000';
                        }else{
                            return '#fff';
                        }
                    }()
                },
                splitLine:{
                    show:false
                },
            },
            yAxis3D: {
                type: 'value',
                min:0,
                max:100,
                axisTick: {
                    show: true,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:function(){
                            if(containerId=="bigForm"){
                                return '#000';
                            }else{
                                return '#fff';
                            }
                        }(),
                        width:2
                    }
                },
                axisLabel:{
                    color:function(){
                        if(containerId=="bigForm"){
                            return '#000';
                        }else{
                            return '#fff';
                        }
                    }()
                },
                splitLine:{
                    show:false
                },
            },
            zAxis3D: {
                type: 'value',
                axisTick: {
                    show: true,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:function(){
                            if(containerId=="bigForm"){
                                return '#000';
                            }else{
                                return '#fff';
                            }
                        }(),
                        width:2
                    }
                },
                axisLabel:{
                    color:function(){
                        if(containerId=="bigForm"){
                            return '#000';
                        }else{
                            return '#fff';
                        }
                    }()
                },
                splitLine:{
                    show:false
                },
            },
            grid3D: {
                viewControl: {
                    // projection: 'orthographic'
                }
            },
            series: [{
                type: 'surface',
                wireframe: {
                    // show: false
                },
                equation: {
                    x: {
                        step: 1,
                        min: 0,
                        max: 100,
                    },
                    y: {
                        step: 1,
                        min: 0,
                        max: 100,
                    },
                    z: function (x, y) {


                        var zf = []
                        for(var i = 0; i<datas.length;i++){
                            tmp = Math.pow((x-datas[i][0])/r1,p)+ Math.pow((y-datas[i][1])/r1,p)
                            zf[i] = -datas[i][2] * Math.pow(Math.E,-tmp)
                        }

                        for(var j = 0; j<datas.length;j++){
                            if(x == datas[j][0] && y== datas[j][1]){
                                return zf[j];
                            } else {
                                var value_min = zf[0]
                                for(var k = 0 ; k<zf.length;k++){
                                    if(value_min>zf[k]){
                                        value_min = zf[k]
                                    }
                                }
                                return value_min

                            }
                        }

                    }
                }
            }]
        }
        myChart.setOption(option,true);
    };
    return{
        all_fun:all_fun,
        weathColler:weathColler,
        sysImg:sysImg,
        deviceInfo:deviceInfo,
        deviceByHour:deviceByHour,
        drawWeekData:drawWeekData,
        draw3DChart:draw3DChart
    }
})();
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

